import React from 'react';
import _ from 'lodash';
import { nanoid } from 'nanoid';
import { useNode, Element } from '@craftjs/core';
import { Row, Col } from 'antd';
import settings from './settings';
import { RealGrid, RealGridColWrapper } from './realGrid';
import GridColWrapper from './gridColWrapper';
import previewImg from '@/assets/images/componentPreview/grid.svg';

const displayName = '栅格';

const Grid = ({ rows, columns, itemIds, ...props }) => {
  const {
    connectors: { connect },
  } = useNode();

  return (
    <div style={{ paddingBottom: '20px' }}>
      <Row ref={connect} {...props}>
        {itemIds.map((id) => (
          <Col key={id} span={24 / columns}>
            <Element id={id} canvas is={GridColWrapper} />
          </Col>
        ))}
      </Row>
    </div>
  );
};

Grid.craft = {
  displayName,
  props: {
    rows: 2,
    columns: 3,
    itemIds: _.map(new Array(2 * 3), () => nanoid(12)),
    align: 'top',
    gutter: [16, 16],
  },
  related: { settings },
};

export default {
  previewImg,
  displayName,
  component: Grid,
  realComponent: RealGrid,
  elementWrappers: [GridColWrapper],
  realComponentWrappers: [RealGridColWrapper],
};
